import 'package:flutter/material.dart';
import 'bars/home.dart';
import 'bars/category.dart';
import 'bars/setting.dart';
import 'bars/user.dart';
import 'bars/message.dart';

class Bars extends StatefulWidget {
  const Bars({super.key});

  @override
  State<Bars> createState() => _BarsState();
}

class _BarsState extends State<Bars> {
  int _currentIndex = 0;
  final List<Widget> _pages = const [
    HomePage(),
    CategoryPage(),
    MessagePage(),
    SettingPage(),
    UserPage(),
  ];
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: PreferredSize(
        preferredSize: Size.fromHeight(44),
        child: AppBar(
          title: const Text(
            "Flutter App",
            style: TextStyle(color: Colors.white),
          ),
          backgroundColor: Colors.red,
        ),
      ),
      drawer: Drawer(
        child: Text("左侧侧边栏"),
      ),
      body: _pages[_currentIndex],
      bottomNavigationBar: BottomNavigationBar(
        fixedColor: Colors.red, // 选中菜单的颜色
        currentIndex: _currentIndex, // 选中的菜单
        type: BottomNavigationBarType.fixed, // 如果底部有四个以上的菜单就要配置他
        // 点击菜单触发的方法
        onTap: (index) {
          // 注意
          setState(() {
            _currentIndex = index;
          });
        },
        items: [
          BottomNavigationBarItem(
            icon: Icon(Icons.home),
            label: "首页",
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.category),
            label: "分类",
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.message),
            label: "消息",
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.settings),
            label: "设置",
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.people),
            label: "用户",
          ),
        ],
      ),
      floatingActionButton: Container(
        margin: EdgeInsets.only(top: 4), // 调整floatingActionButton的位置
        width: 60, // 调整floatingActionButton的大小
        height: 60, // 调整floatingActionButton的大小
        padding: EdgeInsets.all(2),
        decoration: BoxDecoration(
          color: Colors.white,
          borderRadius: BorderRadius.circular(30),
        ),
        child: FloatingActionButton(
          backgroundColor: Colors.red,
          foregroundColor: _currentIndex == 2 ? Colors.white : Colors.black45,
          shape: CircleBorder(),
          child: Icon(Icons.add),
          onPressed: () {
            setState(() {
              _currentIndex = 2;
            });
          },
        ),
      ),
      floatingActionButtonLocation:
          FloatingActionButtonLocation.centerDocked, // 配置浮动按钮的位置
    );
  }
}
